*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
@mixin wh($w,$h,$bg){
  width: $w;
  height: $h;
  background: $bg;
}
@mixin mL($ml){
  margin-left: $ml;
}
body{
  font: 14px 微软雅黑;
  @include wh(100%,100%,null);
}
header{
  @include wh(100%,2.5rem,#F7F7F7);
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
}
#topL{
  margin-left: 78px;
  float: left;
  @include wh(200px,2.5rem,null);
  line-height: 2.5rem;
  span{
    color: green;
  }
  a{
    text-decoration: none;
    color: #000000;
    &:hover{
      text-decoration: underline;
    }
  }
}
#topR{
  margin-right: 80px;
  float: right;
  list-style: none;
  font-size:12px;
  li{
    line-height: 2.5rem;
    float: left;
    a{
      text-decoration: none;
      color: #000000;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      &:hover{
        text-decoration: underline;
      }
      b{
        float: right;
        margin-top: 1.2rem;
        margin-left: 1rem;
        border-top:4px solid #000000;
        border-left:4px solid rgba(0,0,0,0);
        border-right:4px solid rgba(0,0,0,0);
      }
    }
  }
}
nav{
  @include wh(100%,58px,null);
  img{
    float: left;
    margin-left: -194px;
  }
  ul{
    margin-right: 80px;
    margin-top: 1rem;
    float: right;
    list-style: none;
    li{
      float: left;
      @include wh(6rem,2rem,null);
      text-align: center;
      line-height: 2rem;
      cursor: pointer;
      &:hover{
        background: #F7F7F7;
      }
    }
  }
}
#hot{
  position: absolute;
  top:3rem;
  left: 958px;
}
#menuDiv{
  @include wh(100%,340px,null);
  position: relative;
}
.swiper-container{
  @include wh(1200px,340px,null);
}
.swiper-slide{
    width:100%;
}
.swiper-slide img{
  width: 100%;
}
#pagination{
  @include wh(4rem,2rem,null);
  left:1100px;
}
#menu{
  @include wh(236px,340px,rgba(0,0,0,0.5));
  list-style: none;
  position: absolute;
  left: 76px;
  top:0px;
  z-index: 99;
  li{
    @include wh(236px,85px,null);
    color: white;
    border-bottom: 1px solid #ffffff;
    line-height: 84px;
    &:hover{
      background: green;
    }
  }
}
.leftM{
      font-size: 20px;
      margin-left: 50px;
    }
.big{
  font-size: 20px;
  float: right;
  margin-right: 30px;
}
#codeDiv{
  position: fixed;
  right: 0;
  top:6rem;
  @include wh(74px,198px,white);
  z-index: 999;
  img{
    float: left;
  }
  a{
    float: left;
    text-decoration: none;
    text-align: center;
    line-height: 1.5rem;
    border:1px solid green;
    color: green;
    @include wh(76px,1.5rem,null);
    &:hover{
      background: green;
      color: white;
    }
  }
}
#main{
  @include wh(100%,974px,#f7f7f7);
}
#ad{
  @include wh(1200px,167px,null);
  margin-left: 78px;
  img{
    float: left;
  }
}
.pic{
  margin-left: 78px;
  margin-top: 20px;
  @include wh(1202px,349px,null);
}
.picT{
  line-height: 48px;
  height: 48px;
}
#imgH,#imgY{
  float: left;
}
#hPList{
  list-style: none;
  float: left;
  li{
    float: left;
    @include wh(199px,301px,white);
    margin-right: 1px;
    text-align: center;
    div{
      @include wh(199px,240px,null);
    }
  }
}
#youList{
  list-style: none;
  float: left;
  li{
    float: left;
    @include wh(199px,301px,white);
    margin-right: 1px;
    text-align: center;
    div{
      @include wh(199px,240px,null);
      img{
        @include wh(100%,100%,null);
      }
    }
    p{
      span{
        color: red;
      }
    }
  }
}
#more,#more1{
  margin-right: 20px;
  float: right;
  font-size: 14px;
  font-weight: normal;
  span{
    @include wh(20px,20px,#cccccc);
    display: inline-block;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    color: white;
  }
}
.h2{
  margin-left: 78px;
  margin-top: 20px;
  float: left;
  @include wh(1200px,48px,#f7f7f7);
}
#content{
  @include wh(100%,950px,white);
}
#searchDiv{
  @include mL(78px);
  @include wh(890px,82px,null);
}
.cityBn{
  float: left;
  @include mL(10px);
  @include wh(138px,38px,null);
  border:1px solid green;
  cursor: pointer;
  span{
    line-height: 42px;
    @include mL(20px);
  }
  b{
    display: inline-block;
    margin-top: 0.8rem;
    margin-left: 0.5rem;
    border-top:5px solid green;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
  }
}
#search{
  @include mL(10px);
  float: left;
  @include wh(458px,38px,null);
  border: 1px solid green;
}
#searchBn{
  float: left;
 @include wh(120px,40px,green);
  text-align: center;
  line-height: 40px;
  color: white;
}
#contentL{
  @include wh(890px,880px,null);
  @include mL(78px);
  float: left;
}
#sort{
  @include wh(888px,42px,#f7f7f7);
  border: 1px solid #cccccc;
  div{
    float: left;
    @include wh(120px,42px,null);
    line-height: 42px;
    text-align: center;
  }
  p{
    margin-top: 6px;
    float: right;
    @include wh(103px,30px,null);
    border: 1px solid #cccccc;
    img{
      float: left;
    }
    span{
      float: right;
      line-height: 30px;
      text-align: center;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.wBg{
  background: white;
}
#contentR{
  float: right;
  margin-right: 76px;
  //@include wh(270px,729px,null);
  @include wh(270px,729px,null);
  border: 1px solid #cccccc;
  p{
    @include wh(268px,42px,#F7F7F7);
    text-align: center;
    line-height:42px;
  }
}
#list{
  @include wh(890px,665px,null);
  list-style: none;
  margin-bottom: 20px;
  li{
    @include wh(890px,133px,null);
    border-bottom: 1px solid #cccccc;
  }
}
.liL{
  float: left;
  margin-right: 320px;
  margin-top: 15px;
  @include wh(90px,90px,null);
  border: 1px solid #cccccc;
  img{
    @include wh(100%,100%,null);
  }
}
.liC{
  float: left;
  @include mL(-306px);
  @include wh(390px,133px,null);
  padding-top: 10px;
  p{
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.liR{
  float: left;
  @include mL(60px);
  padding-top: 10px;
  @include wh(160px,133px,null);
  p{
    line-height: 33px;
  }
}
.enterStore{
  @include wh(140px,40px,#ffffff);
  text-decoration: none;
  float: left;
  border: 1px solid #185;
  color: #185;
  display: none;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  margin-top: 45px;
}
#listShop{
  list-style: none;
  li:nth-child(1),li:nth-child(2),li:nth-child(3){
    span{
      color: red;
      border: 1px solid #ff0000;
    }
  }
  li{
    @include wh(268px,98px,null);
    border-bottom: 1px solid #cccccc;
    span{
      @include mL(20px);
      margin-top: 30px;
      float: left;
      @include wh(20px,20px,null);
      border:1px solid black;
      text-align: center;
      line-height: 20px;
      border-radius: 100%;
      color: black;
    }
    img{
      @include mL(20px);
      margin-top: 10px;
      float: left;
      @include wh(50px,50px,null);
    }
    h3{
      @include mL(20px);
      margin-top: 10px;
      @include wh(115px,1.5rem,null);
      float: left;
    }
    p{
      @include mL(20px);
      @include wh(100px,1rem,white);
      float: left;
    }
  }
}

footer{
  border-top: 1px solid #cccccc;
  @include wh(100%,264px,#FAFAFA);
}
#footT{
  @include wh(980px,129px,null);
  border-bottom: 1px solid #cccccc;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto;
}
.footDiv{
  margin-top: 20px;
  @include wh(245px,88px,null);
  display: flex;
  flex-flow: row nowrap;
  div{
    width:66px ;
  }
}
#footB{
  p{
    @include wh(100%,2rem,null);
    text-align: center;
    line-height: 2rem;
    span{
      margin-left: 10px;
    }
  }
}
#top{
  display: none;
  text-align: center;
  color: #000000;
  text-decoration: none;
  position: fixed;
  right: 0;
  top:30rem;
  z-index: 100;
  @include wh(27px,82px,null);
  border: 1px solid #cccccc;
}
#cityDiv{
  @include wh(460px,182px,#f7f7f7);
  display: none;
  border:1px solid #cccccc;
  position: fixed;
  top:2rem;
  left: 90px;
  z-index: 999;
}
#cityCon{
  @include wh(438px,143px,white);
  border: 1px solid #cccccc;
  @include mL(10px);
  p{
    float: left;
  }
}
@mixin ul($w,$h){
  list-style: none;
  overflow: hidden;
  li{
    float: left;
    width: $w;
    height: $h;
  }
}
#hotCity{
  @include ul(40px,20px);
}
#cityList{
  @include mL(28px);
  @include ul(50px,20px);
}
#pinyinList{
  @include ul(1rem,20px);
}
#cityCloseBn{
  float: right;
  border:1px solid #cccccc;
  cursor: pointer;
}
.loginDiv{
  @include wh(100%,100%,rgba(0,0,0,0.5));
  position: fixed;
  top: 0;
  z-index: 999;
  display: none;
}
.loginCon{
  border: 1px solid #cccccc;
  @include wh(460px,396px,white);
  position: absolute;
  top: 20%;
  left: 30%;
}
.addUserCon{
  border: 1px solid #cccccc;
  @include wh(544px,425px,white);
  position: absolute;
  top: 20%;
  left: 30%;
}
.addL{
  border: 1px solid #cccccc;
  float: left;
  @include wh(143px,368px,null);
  ul{
    @include wh(143px,325px,null);
    list-style: none;
    li{
      border: 1px solid #cccccc;
      height: 50px;
      //background: #A7DEEF;
      line-height: 50px;
      text-align: center;
    }
  }
  p{
    @include wh(143px,20px,null);
  }
}
.addR{
  @include wh(380px,368px,null);
  float: left;
}
#telDiv{
  @include wh(380px,368px,null);
  p{
    @include wh(380px,61px,null);
    line-height: 61px;
    span{
      font-size:10px ;
    }
  }
  p:nth-child(1) {
    input{
      @include wh(261px,33px,null);
    }
    span{
      @include wh(261px,1rem,null);
    }
  }
  p:nth-child(2) {
    input{
      @include wh(111px,33px,null);
    }
  }
  p:nth-child(3) {
    input{
      @include wh(137px,33px,null);
    }
  }
  p:nth-child(4) {
    input{
      @include wh(261px,33px,null);
    }
  }
}
@mixin hL($h){
  height: $h;
  line-height: $h;
}
#loginB{
  @include wh(460px,287px,null);
  float: left;
  margin-top: 30px;

  p{
    float: left;
    margin-top: 10px;
    width: 380px;
    padding-left: 40px;
    span{
      font-size:10px ;
    }
    input[type="text"]{
      margin-left: 20px;
    }
    input[type="checkbox"]{
      margin-left: 62px;
    }
  }
  p:nth-child(1) {
    @include hL(42px);
    input{
      @include wh(261px,33px,null);
    }
    span{
      @include wh(261px,1rem,null);
    }
  }
  p:nth-child(2) {
    @include hL(42px);
    input{
      @include wh(261px,33px,null);
    }
    span{
      @include wh(261px,1rem,null);
    }
  }
  p:nth-child(3) {
    @include hL(42px);
    input{
      @include wh(137px,33px,null);
    }
  }
  p:nth-child(4) {
    @include hL(13px);
  }
  p:nth-child(5) {
    @include hL(40px);
    button{
      margin-left: 62px;
      @include wh(263px,40px,green);
      color: white;
      &:hover{
        background: rgba(0,255,0,0.9);
      }
    }
  }
}
.topAdd{
  @include wh(100%,56px,null);
  border-bottom: 1px solid #cccccc;
    img{
      float: left;
    }
    div{
      padding-left:20px ;
      @include wh(410px,56px,null);
      line-height: 56px;
      float: left;
    }
    span{
      cursor: pointer;
      float: left;
      @include wh(29px,24px,null);
      border: 1px solid #cccccc;
      line-height: 24px;
      text-align: center;
      margin: 10px;
    }
}
.topLogin{
  @include wh(100%,56px,null);
  border-bottom: 1px solid #cccccc;
  img{
    float: left;
  }
  div{
    padding-left:20px ;
    @include wh(328px,56px,null);
    line-height: 56px;
    float: left;
  }
  span{
    cursor: pointer;
    float: left;
    @include wh(29px,24px,null);
    border: 1px solid #cccccc;
    line-height: 24px;
    text-align: center;
    margin: 10px;
  }
}
.addUserDiv{
  @include wh(100%,100%,rgba(0,0,0,0.5));
  position: fixed;
  top: 0;
  z-index: 999;
  display: none;
}
/*地图页面*/
#mapDiv{
  @include wh(100%,100%,rgba(0,0,0,0.5));
  position: fixed;
  top: 0;
  z-index: 999;
  display: none;
}
#mapContainer{
  border: 1px solid #cccccc;
  @include wh(890px,551px,white);
  position: absolute;
  top: 10%;
  left: 15%;

}
.topMap{
  @include wh(100%,32px,white);
  h3{
    line-height: 32px;
    padding-left: 20px;
    background: url(https://p.ssl.qhimg.com/t015366a1ffdd4fea2d.png) repeat-x;
    span{
      float: right;
      color: #cccccc;
      cursor: pointer;
      margin-right: 10px;
      &:hover{
        color: black;
      }
    }
  }
}
#container{
  @include wh(100%,455px,null);
}
#pageDiv{
  @include wh(890px,40px,null);
}
#page,#mapPage{
  //width: 890px;
  //margin: auto;
    li{
      list-style: none;
      border:1px solid #D6D6D6;
      margin: 0px 5px;
      padding: 10px 15px;
      float: left;
      cursor: pointer;
    }
}
/*显示页的按钮样式*/
.active{
  background: #FC6621;
  color: white;
  border:1px solid #FC6621;
}
#user,#logoutBn{
  display: none;
}
/*地图信息窗体*/
.info{
  border: 1px solid silver;
  background: white;
  h3{
    position: relative;
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #CCC;
    border-radius: 5px 5px 0 0;
    span{
      position: absolute;
      top: 0px;
      right: 10px;
      transition-duration: 0.25s;
    }
  }
}
.info_b{
  @include wh(100%,0px,null);
  clear: both;
  text-align: center;
  img{
    position: relative;
    z-index: 104;
  }
}